<template>
  <div>
    父组件<br />
    <hr />
    <!-- <child /> -->
    <my-table :data="persons">
      <!-- 旧的写法 -->
      <template slot-scope="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'blue' : 'green' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <br />
    <br />
    <my-table :data="persons">
      <!-- 新的写法 -->
      <template #default="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'blank' : 'yellow' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
    <my-table :data="persons">
      <!-- 新的写法 -->
      <template #default="scope">
        <span :style="{ color: scope.row.tag === '家' ? 'pink' : 'gold' }">{{
          scope.row.tag
        }}</span>
      </template>
    </my-table>
  </div>
</template>
<script>
import MyTable from './MyTable'
export default {
  components: {
    MyTable
  },
  data () {
    return {
      persons: [
        { id: 1001, name: '哈哈哈', address: '湖北荆州', tag: '家' },
        { id: 1002, name: '嘻嘻嘻', address: '广东深圳', tag: '公司' },
        { id: 1003, name: '嘿嘿嘿', address: '深圳白石洲', tag: '家' }
      ]
    }
  }
}
</script>
